<template>
  <div id="center">
    <div class="content">
      <div class="content-fixed">
        <div class="nav-title">
          <div class="user-img">
            <img src="../../assets/img/geren.png" alt />
          </div>
          <p class="user-name">
            <span>{{userMessage.name}}</span>
            <span v-if="userMessage.authorizeLevel==2" class="c-bg-rz">已认证</span>
            <span v-else>未认证</span>
            
          </p>
          <ul class="type">
            <li @click="$router.push({path:v.url})" v-for="(v,i) in navList.slice(0,3)" :key="i">
              <img style="width:40px;" v-if="currentChoose!=v.url" :src="v.imgSelect" alt />
              <img style="width:40px;" v-else :src="v.img" alt />
              <p>{{v.name}}</p>
            </li>
          </ul>
        </div>
        <div class="nav-list">
          <li
            @click="$router.push({path:v.url})"
            v-for="(v,i) in navList.slice(3,7)"
            :key="i"
            :class="currentChoose==v.url?'navActive':''"
          >
            <img :src="v.img" alt />
            <span>{{v.name}}</span>
          </li>
        </div>
      </div>
      <div class="content-right nui-scrolls">
        <!-- <transition name="fade" mode="in-out"> -->
        <router-view></router-view>
        <!-- </transition> -->
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "center",
  data() {
    return {
      currentChoose: this.$route.path,
      navList: [
        {
          id: 1,
          img: require("../../assets/img/otc(1).png"),
          imgSelect: require("../../assets/img/otc.png"),
          name: "OTC",
          url: "/otc"
        },
        {
          id: 2,
          img: require("../../assets/img/chongti(1).png"),
          imgSelect: require("../../assets/img/chongti.png"),
          name: "充提币",
          url: "/coin"
        },
        {
          id: 3,
          img: require("../../assets/img/huazhuan(1).png"),
          imgSelect: require("../../assets/img/huazhuan.png"),
          name: "划转",
          url:"/walletTransfer"
        },
        {
          id: 4,
          img: require("../../assets/img/gren.png"),
          name: "个人资料",
          url: "/personalCenter"
        },
        {
          id: 5,
          img: require("../../assets/img/qianbao.png"),
          name: "我的钱包",
          url:"/wallet"
        },
        // {
        //   id: 6,
        //   img: require("../../assets/img/jioayijilu.png"),
        //   name: "交易记录",
        //   url: "/tradingRecord"
        // },
        {
          id: 7,
          img: require("../../assets/img/xiaoxizhongxin.png"),
          name: "消息中心",
          url: "/messageCenter"
        }
      ]
    };
  },
  computed: {
    ...mapState(["userMessage", "userInfo"])
  },
  watch: {
    $route() {
      this.currentChoose = this.$route.path;
    }
  },
  created() {},
  methods: {}
};
</script>
<style lang='less' scope>
@import url("../../assets/css/comm.css");
#center {
  background-color: #f7f9fb;
  .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    > .content-fixed {
      width: 220px;
      background-color: #fff;
      .nav-title {
        padding: 20px 0;
        .user-img {
          margin: 0 auto 20px;
          width: 60px;
          height: 60px;
          background-color: #0a9187;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .user-name {
          margin-bottom: 30px;
          text-align: center;
          > span:nth-child(1) {
            color: #a1b1b0;
            font-size: 13px;
          }
          > span:nth-child(2) {
            background-image: linear-gradient(#717171, #d4d4d4);
            color: #fff;
            font-size: 12px;
            border-radius: 10px;
            padding: 4px 10px;
          }
          > .c-bg-rz {
            background-image: linear-gradient(#fbe0b8, #cfa66e) !important;
          }
        }
        .type {
          display: flex;
          justify-content: space-around;
          align-items: center;
          > li {
            p {
              text-align: center;
              font-size: 12px;
              color: #a1b1b0;
            }
          }
        }
      }
      .nav-list {
        text-align: center;
        li {
          padding: 10px 0;
          cursor: pointer;
          border-left: 2px solid #fff;

          span {
            color: #a1b1b0;
            font-size: 14px;
            margin-left: 20px;
          }
        }
        li:hover {
          transition: all 1s;
          background-color: #eff6f6;
          border-left: 2px solid #0a9187;
          span {
            color: #dbb783 !important;
          }
        }
      }
    }
    > .content-right {
      // border: 1px solid red;
      margin-left: 10px;
      width: calc(100% - 230px);
      // border: 1px solid red;
      // height: 80vh;
      // overflow-y: scroll;
    }
  }
}

.navActive {
  background-color: #eff6f6;
  border-left: 2px solid #0a9187 !important;
  > span {
    color: #dbb783 !important;
  }
}
</style>